<template>
    <div ref="container" style="width: 585px; height: 400px; overflow: hidden;">
      <!-- WebGL渲染容器 -->
    </div>
  </template>
  
  <script>
  import * as THREE from 'three';
  
  export default {
    name: 'EarthComponent',
    data() {
      return {
        scene: null,
        camera: null,
        renderer: null,
        earthMesh: null,
        mouseDown: false,
        mouseX: 0,
        mouseY: 0
      };
    },
    mounted() {
      this.init();
      this.animate();
    },
    methods: {
      init() {
        // 场景
        this.scene = new THREE.Scene();
  
        // 相机
        this.camera = new THREE.PerspectiveCamera(45, 585 / 400, 0.1, 1000);
        this.camera.position.z = 5;
  
        // 渲染器
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(585, 400);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.$refs.container.appendChild(this.renderer.domElement);
  
        // 地球纹理
        const loader = new THREE.TextureLoader();
        const earthTexture = loader.load('https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg');
  
        // 地球网格
        const geometry = new THREE.SphereGeometry(2, 32, 32);
        const material = new THREE.MeshBasicMaterial({ map: earthTexture });
        this.earthMesh = new THREE.Mesh(geometry, material);
        this.scene.add(this.earthMesh);
  
        // 事件监听
        document.addEventListener('wheel', this.onDocumentMouseWheel, { passive: false });
        this.$refs.container.addEventListener('mousedown', this.onMouseDown, { passive: false });
        document.addEventListener('mouseup', this.onMouseUp, { passive: false });
        document.addEventListener('mousemove', this.onMouseMove, { passive: false });
  
        // 窗口大小调整监听
        window.addEventListener('resize', this.onWindowResize);
      },
      animate() {
        requestAnimationFrame(this.animate);
        this.renderScene();
      },
      renderScene() {
        this.renderer.render(this.scene, this.camera);
      },
      onDocumentMouseWheel(event) {
        if (!this.mouseDown) return; // 如果左键未按下，则不做任何操作
        const fov = this.camera.fov + event.deltaY * 0.05; // 调整缩放的灵敏度
        this.camera.fov = THREE.MathUtils.clamp(fov, 10, 75); // 限制缩放级别
        this.camera.updateProjectionMatrix();
        event.preventDefault(); // 阻止默认滚动行为
      },
      onMouseDown(event) {
        if (event.button !== 0) return; // 只响应左键
        event.preventDefault(); // 阻止默认滚动行为
        this.mouseDown = true;
        this.mouseX = event.clientX;
        this.mouseY = event.clientY;
      },
      onMouseUp(event) {
        if (event.button !== 0) return; // 只响应左键
        event.preventDefault(); // 阻止默认滚动行为
        this.mouseDown = false;
      },
      onMouseMove(event) {
        if (!this.mouseDown) return;
        const movementX = event.clientX - this.mouseX;
        const movementY = event.clientY - this.mouseY;
        this.mouseX = event.clientX;
        this.mouseY = event.clientY;
        this.earthMesh.rotation.y += movementX * 0.01;
        this.earthMesh.rotation.x += movementY * 0.01;
        event.preventDefault(); // 阻止默认滚动行为
      },
      onWindowResize() {
        const containerWidth = this.$refs.container.clientWidth;
        const containerHeight = this.$refs.container.clientHeight;
        this.camera.aspect = containerWidth / containerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(containerWidth, containerHeight);
      }
    },
    beforeDestroy() {
      // 清理事件监听
      document.removeEventListener('wheel', this.onDocumentMouseWheel);
      this.$refs.container.removeEventListener('mousedown', this.onMouseDown);
      document.removeEventListener('mouseup', this.onMouseUp);
      document.removeEventListener('mousemove', this.onMouseMove);
      window.removeEventListener('resize', this.onWindowResize);
    }
  };
  </script>
  
  <style>
  /* 如果需要，可以在这里添加自定义样式 */
  </style>
  